<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
</head>
<body>
    <!-- Wrapper -->
<div id="wrapper">
    <%= require('./common/header.htm') %>

    <!-- Banner -->
    <section id="banner" class="major">
        <div class="inner">
            <header class="major">
                <h1>Welcome to MyPetStore!</h1>
            </header>
            <div class="content">
                <ul class="actions">
                    <li><a href="#one" class="button next scrolly">Get Started</a></li>
                </ul>
            </div>
            <div id="QuickLinks">
                <a href="/catalog/viewCategory?categoryId=FISH">
                    Fish
                </a>
                <img src="<%= require('../images/separator.gif') %>" />
                <a href="/catalog/viewCategory?categoryId=DOGS">
                    Dogs
                </a>
                <img src="<%= require('../images/separator.gif') %>" />
                <a href="/catalog/viewCategory?categoryId=REPTILES">
                    Reptiles
                </a>
                <img src="<%= require('../images/separator.gif') %>" />
                <a href="/catalog/viewCategory?categoryId=CATS">
                    Cats
                </a>
                <img src="<%= require('../images/separator.gif') %>" />
                <a href="/catalog/viewCategory?categoryId=BIRDS">
                    Birds
                </a>
            </div>
        </div>
    </section>

    <!-- Main -->
    <div id="main">

        <!-- One -->
        <section id="one" class="tiles">

            <article th:each="category:${categoryList}">
                <span class="image">
                    <img th:src="${category.description}" alt=""/>
                </span>
                <header class="major">
                    <h3><a th:href="@{/catalog/viewCategory(categoryId=${category.categoryId})}" th:text="${category.categoryId}">0</a></h3>
                </header>
            </article>

        </section>



    </div>

    <%= require('./common/footer.htm') %>

</div>
</body>
</html>